/* SPDX-License-Identifier: Apache-2.0 */

/*
  TOTP qr code and form, found on the TOTP provisioning page:

  <div class="totp-form">
    <div>
      <div class="totp-form__qr">
        // QR code here
      </div>
      <div class="totp-form__manual-code">
        // code for manual entry here
      </div>
    </div>
    <form class="totp-form__form">
      // form here
    </form>
  </div>
*/

.totp-form {
  display: flex;
  margin: $spacing-unit 0;

  &__qr {
    border: 1px solid $border-color;
    margin-bottom: $spacing-unit;

    img {
      width: 100%;
    }
  }

  &__manual-code {
    code {
      display: inline-block;
      margin: 0 5px 5px 0;
    }
  }

  &__form {
    padding-left: $spacing-unit;
    margin-top: $half-spacing-unit;
  }

  @media only screen and (max-width: $small-tablet) {
    display: block;

    &__qr {
      display: inline-block;
    }

    &__form {
      padding-left: 0;
      margin-top: $spacing-unit;
    }
  }
}
